<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable>
          <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          clearable
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['gua_type.eq']"
          placeholder="业务模式"
          :options="enumGuaType"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['is_history.eq']"
          clearable
          placeholder="是否是历史数据"
          :options="{
            0: '否',
            1: '是',
          }"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.mobile_no" placeholder="电话号码查询" clearable>
          <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button @click="handleFlow">
          <i class="fa fa-sitemap"></i>
          审批流程
        </el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button @click="handleAdd()" icon="el-icon-plus">新增保函</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:status="scope">
        <div class="badge" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.approvalLabel }}
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <approval-list :visible.sync="listVisible" @success="getData()"></approval-list>

    <letter-approval
      :visible.sync="editVisible"
      :query-id="editId"
      :table-id="tableId"
      @success="getData()"
    ></letter-approval>

    <flow-dialog
      title="保函审批流程"
      :visible.sync="flowVisible"
      flow-key="ELE_APPROVAL"
    ></flow-dialog>

    <el-dialog
      top="30px"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="beforeClose"
      :visible.sync="letterVisible"
    >
      <pdf-view :contract-id="letterId" :view-mode="true" :query-id="queryId"></pdf-view>
    </el-dialog>
  </div>
</template>

<script>
import { enumGuaType } from '@/bigcredit/views/program/enum'
import SelectAddress from '@/components/select/SelectAddress'
import ApprovalList from '@/bigcredit/views/eletter/components/ApprovalList'
import letterApproval from '@/bigcredit/views/eletter/components/MainDialog'
import { getFollow } from '@/credit/mixin/taskTableCountyUnionProvince'
import FlowDialog from '@/credit/components/flow/ViewDialog'
import { mapGetters } from 'vuex'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
export const enumApprovalStatus = {
  0: '待审批',
  1: '审批中',
  2: '审批通过',
  3: '审批拒绝',
  4: '退回',
}
const enumStatusStyle = {
  0: 'info',
  1: 'info',
  2: 'success',
  3: 'danger',
  4: 'warning',
}
export default {
  components: {
    SelectAddress,
    ApprovalList,
    letterApproval,
    FlowDialog,
    PdfView,
  },
  props: {},
  data() {
    return {
      enumGuaType,
      params: {
        index: 1,
        size: 15,
      },
      loading: false,
      tableName: 'ele_letter_view',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '120px' },
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        {
          attrs: { label: '开函时间', prop: 'sign_date', align: 'center', width: 130 },
        },
        { attrs: { label: '审批状态', prop: 'approvalLabel', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '待审核人员', prop: 'itemStatusLabel', align: 'center' },
        },
        {
          attrs: {
            label: '审批完成时间',
            prop: 'approval_end_date',
            align: 'center',
            width: '100px',
          },
        },
        {
          attrs: { label: '操作', align: 'center', width: 140 },
          operations: [
            {
              content: '保函审批',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              ifRender: row => row.editEnable,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      listVisible: false,

      editVisible: false,
      editId: '',
      tableId: '',

      flowVisible: false,

      letterVisible: false,
      letterId: '',
      queryId: '',
    }
  },
  computed: {
    ...mapGetters(['userId', 'clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.letterVisible = false
    },
    handleView(row) {
      this.letterVisible = true
      this.letterId = row.doc_id
      this.queryId = row.customer_related_id
    },
    handleFlow() {
      this.flowVisible = true
    },
    handleEdit(row) {
      this.editVisible = true
      this.editId = row.customer_related_id
      this.tableId = row.ele_letter_id
    },
    handleAdd() {
      this.listVisible = true
    },
    dataAdapter(item) {
      item.approvalLabel = enumApprovalStatus[item.approval_status]
      item.statusStyle = enumStatusStyle[item.approval_status]
      item.itemStatusLabel = ''
      return item
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          const data = res.data || {}
          this.tableCount = data.totalCount || 0
          this.tableData = (data.data || []).map(this.dataAdapter)
          return getFollow(
            (data?.data ?? []).map(item => {
              return {
                customer_related_id: item.ele_letter_id,
              }
            }),
            'ELE_APPROVAL'
          )
        })
        .then(record => {
          this.tableData = this.tableData.map(it => {
            const data = record.find(item => item.wf_related_id === it.ele_letter_id) || {}
            it.editEnable = data.task_person?.includes(this.userId) ?? false
            it.itemStatusLabel = data.innerFollow || ''
            return it
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
